<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="/node_modules/chartist/dist/chartist.min.css">
</head>
<body>
  <div class="ct-chart ct-perfect-fourth"></div>
  <script src="/node_modules/chartist/dist/chartist.min.js"></script>
  <script>
    // 曲线图
    // var data = {
    //   labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
    //   series: [
    //     [5, 4, 3, 2, 1, 0]
    //   ]
    // }
    // var options = {
    //   width: 300,
    //   height: 200
    // };
    // new Chartist.Line('.ct-chart', data, options);
    
    // 折线图
    // var data = {
    //   labels: ['wek1', 'wek2', 'wek3', 'wek4', 'wek5', 'wek6'],
    //   series: [
    //     [1, 2, 3, 5, 3, 4],
    //     [3, 2, 1, 5, 4, 2],
    //     [2, 1, -1, -2, 3, 0]
    //   ]
    // }

    // //  设置选项并重写默认值 
    // var options = {
    //   // 图点
    //   showPoint: true,
    //   // 折现或曲线
    //   lineSmooth: false,

    //   // X轴配置
    //   axisX: {
    //     // 此轴上的网格使用状态
    //     showGrid: true,
    //     // 标签
    //     showLabel: true
    //   },

    //   // Y轴配置
    //   axisY: {
    //     // 偏移量
    //     offset: 60,
    //     // 标签上插入值，可以修改
    //     // 函数转换值单位
    //     labelInterpolationFnc: function(value) {
    //       return '$' + value + 'm';
    //     }
    //   },
    //   width: '800px',
    //   height: '300px'
    // };
    // new Chartist.Line('.ct-chart', data, options);

    // 柱状图
    var data = {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        series: [
        [5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8],
        [3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4]
      ]
    };

    var options = {
      seriesBarDistance: 15,
      width: 800,
      height: 300
    };

    var responsiveOptions = [
      ['screen and (min-width: 641px) and (max-width: 1024px)', {
        seriesBarDistance: 10,
        axisX: {
          labelInterpolationFnc: function (value) {
            return value;
          }
        }
      }],

      ['screen and (max-width: 640px)', {
        seriesBarDistance: 5,
        axisX: {
          labelInterpolationFnc: function (value) {
            return value[0];
          }
        }
      }]
    ];

    new Chartist.Bar('.ct-chart', data, options, responsiveOptions);
  </script>
</body>
</html>